import React, { useState } from 'react';
import {
    Form,
    Input,
    InputNumber,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete,
} from 'antd';
import axios from "axios"
import { Content } from 'antd/lib/layout/layout';
import {request} from "umi"

const Reg = (props) => {
    const { Option } = Select;

    const formItemLayout = {
        labelCol: {
            xs: {
                span: 8,
            },
            sm: {
                span: 8,
            },
        },
        wrapperCol: {
            xs: {
                span: 8,
            },
            sm: {
                span: 8,
            },
        },
    };
    const tailFormItemLayout = {
        wrapperCol: {
            xs: {
                span: 24,
                offset: 0,
            },
            sm: {
                span: 16,
                offset: 8,
            },
        },
    };

    const RegistrationForm = () => {
        const [form] = Form.useForm();

        const onFinish = (values) => {
            console.log('success: ', values);
            let param = new URLSearchParams()
            param.append("account", values.account)
            param.append("pw", values.pw)
            param.append("shopname", values.shopname)
            param.append("address", values.address)
            param.append("email", values.email)
            param.append("code", values.code)
            console.log(param);
            request("http://www.young1024.com:1717/v1/user/apply",{data:param}).then(
                (res)=>{
                    if (res.data.status === "success") {
                        setTimeout(() => {
                            props.history.replace('/login')
                        }, 1500)
                        console.log(res);
                    }
                },
                (err)=>{console.log(err); }
            )

            // axios(
            //     {
            //         method: "post",
            //         url: "http://www.young1024.com:1717/v1/user/apply",
            //         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            //         data: param
            //     }).then(
            //         (res) => {
            //             if (res.data.status === "success") {
            //                 setTimeout(() => {
            //                     props.history.replace('/login')
            //                 }, 1500)
            //             } console.log();
            //         },
            //         (err) => { console.log(err); }
            //     )
        };
        const onFinishFailed = (values) => {
            console.log('failed: ', values.values);
        };

        const getCode = () => {
            let str = localStorage.getItem("email")
            let param = new URLSearchParams()
            param.append("email", str)
            console.log(param);
            if (str) {
                axios(
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        method: "post",
                        url: "http://www.young1024.com:1717/v1/code",
                        data: param
                    }).then(
                        (res) => {
                            if (res.data.status === "success") {
                                alert("已发送")
                            }
                        },
                        (err) => { console.log(err); }
                    )
            }
        }

        const [autoCompleteResult] = useState([]);



        const websiteOptions = autoCompleteResult.map((website) => ({
            label: website,
            value: website,
        }));
        return (
            <Form
                {...formItemLayout}
                form={form}
                name="register"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                scrollToFirstError
            >

                <Form.Item
                    name="account"
                    label="账号"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your nickname!',
                            whitespace: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="pw"
                    label="密码"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                    hasFeedback
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="confirm"
                    label="密码确认"
                    dependencies={['pw']}
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: 'Please confirm your password!',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('pw') === value) {
                                    return Promise.resolve();
                                }

                                return Promise.reject(new Error('The two passwords that you entered do not match!'));
                            },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="shopname"
                    label="店铺名"
                    tooltip="What do you want others to call you?"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your nickname!',
                            whitespace: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>



                <Form.Item
                    name="address"
                    label="店铺地址"
                    rules={[
                        {
                            // type: 'array',
                            required: true,
                            message: 'Please select your habitual residence!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="email"
                    label="电子邮箱"
                    rules={[
                        {
                            type: 'email',
                            message: 'The input is not valid E-mail!',
                        },
                        {
                            required: true,
                            message: 'Please input your E-mail!',
                        },
                    ]}
                >
                    <Input onBlur={(event) => { console.log(event.target.value); localStorage.setItem("email", event.target.value) }} />
                </Form.Item>

                <Form.Item label="验证码" extra="We must make sure that your are a human.">
                    <Row gutter={8}>
                        <Col span={12}>
                            <Form.Item
                                name="code"
                                noStyle
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please input the captcha you got!',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Button onClick={getCode}>获取验证码</Button>
                        </Col>
                    </Row>
                </Form.Item>

                <Form.Item
                    name="agreement"
                    valuePropName="checked"
                    rules={[
                        {
                            validator: (_, value) =>
                                value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
                        },
                    ]}
                    {...tailFormItemLayout}
                >
                    <Checkbox>
                        I have read the <a href="">agreement</a>
                    </Checkbox>
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        Register
                    </Button>
                </Form.Item>

            </Form>
        );
    };
    return (
        <div>
            <RegistrationForm />
        </div>
    )
}

export default Reg;